import React, { memo, useState } from "react";
import { useHistory } from "react-router-dom";
import { Pagination } from "antd";
import { Blogswrap } from "./style";
export default memo(function Blogs(props) {
  const [current, setCurrent] = useState(0);
  const history = useHistory();
  const onChange = (page) => {
    setCurrent((page - 1) * 8);
  };
  return (
    <Blogswrap>
      <div className="content1">
        {props.blog.length > 0 &&
          props.blog.slice(current, current + 8).map((item, index) => {
            return (
              <div className="oneblog" key={index}>
                <div className="title">
                  <span
                    onClick={(e) => {
                      history.push(
                        `/home/aesthetic/aesathedetail/${item.bgid}`
                      );
                    }}
                  >
                    {item.title.slice(0, 10) + "..."}
                  </span>
                </div>
                <p className="summary">{item.summary.slice(0, 130) + "..."}</p>
                <p
                  className="allmessage"
                  onClick={(e) => {
                    history.push(`/home/aesthetic/aesathedetail/${item.bgid}`);
                  }}
                >
                  阅读全文>>>
                </p>
                <p className="bottom">
                  <span>{item.releaseDate}</span>
                  <span>作者:{item.nickName}</span>
                  <span>文章来源:网络手机</span>
                  <span>文章分类 [{item.typeName}]</span>
                </p>
              </div>
            );
          })}
      </div>
      <div className="page">
        <Pagination
          pageSize={8}
          onChange={onChange}
          total={props.blog.length}
        />
      </div>
    </Blogswrap>
  );
});
